<template>
  <view class="page">
    <scroll-view style="height: 100%" scroll-y="true">
      <image class="img"
             src="https://edu-1010xzh.oss-cn-shenzhen.aliyuncs.com/sale-ticket/a4eeaef45ac44e61b1f370b4da00e1ca.webp.gif"></image>
      <image class="moreImage" src="https://edu-1010xzh.oss-cn-shenzhen.aliyuncs.com/sale-ticket/58_.gif"></image>
      <image class="showImage"
             src="https://edu-1010xzh.oss-cn-shenzhen.aliyuncs.com/sale-ticket/c5b54bd11eee4d28b3cddb3a5fb6ba55.webp.jpg"></image>

      <view class="list">
        <view class="itemList" v-for="(performanceList, idx1) in performanceListList" :key="idx1">
          <view class="item" v-for="(item, idx2) in performanceList" :key="idx2" @click="toDetail(item)">
            <view class="cover">
              <image class="coverImage"
                     :src="item.performanceCoverUrl"></image>
            </view>
            <view class="title">
              {{ item.performanceTitle }}
            </view>
            <view class="price">
              <view class="discount">
                {{ discountPercentage(item.maxDiscount) }}
              </view>
              <view class="number">
                <span style="font-size: 8px;">¥</span> <span
                  style="font-size: 15px; font-weight: bold;">{{ item.maxDiscountPrice }}</span>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {getDiscountPerformance} from "../../api/user/concert";
import {discountPercentage} from "../../utils/price";

export default {

  data() {
    return {
      performanceListList: [],
    }
  },
  created() {
    getDiscountPerformance().then(res => {
      this.performanceListList = res.data;
      console.log(this.performanceListList)
    })
  },
  methods: {
    discountPercentage,
    toDetail(item) {
      uni.navigateTo({
        url: `/subpkg/concert-detail/concert-detail?performanceId=${item.performanceId}`,
      });
    },
  }
}
</script>

<style lang="scss">
.page {
  box-sizing: border-box; /* 将盒模型设置为border-box */
  width: 100%;
  height: 100%;
  background-color: #D55D55;
}

.img {
  box-sizing: border-box; /* 将盒模型设置为border-box */
  width: 100%;
}

.moreImage {
  box-sizing: border-box; /* 将盒模型设置为border-box */
  width: 375px;
  height: 75px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.showImage {
  border-radius: 10px;
  box-sizing: border-box; /* 将盒模型设置为border-box */
  width: 357px;
  height: 70px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.list {
  padding: 10px;

  .itemList {
    width: 100%;
    background-color: white;
    display: flex;
    padding: 10px 0 15px 0;
    border-radius: 8px;
    margin-bottom: 10px;

    .item {
      width: 30%;
      margin-left: 2.5%;

      .cover {
        border-radius: 5px;
        width: 100%;
        height: 240rpx;
        overflow: hidden;

        .coverImage {
          width: 100%;
          height: 100%;
        }
      }

      .title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2; /* 控制显示的行数 */
        font-size: 13px;
        min-height: 33px;
      }

      .price {
        margin-top: 5px;
        position: relative;
        width: 100%;
        height: 49px;
        background-image: url("https://edu-1010xzh.oss-cn-shenzhen.aliyuncs.com/sale-ticket/priceBg.png");
        background-size: cover; /* 使背景图片覆盖整个 div */
        background-position: center; /* 将背景图片居中 */
        background-repeat: no-repeat; /* 防止背景图片重复 */
        .discount {
          font-size: 8px;
          color: #FF2E79;
          position: absolute;
          right: 21%;
        }

        .number {
          color: white;
          position: absolute;
          right: 17%;
          top: 25%;
        }
      }
    }
  }
}


</style>
